<template>
  <div id="sdcenter">
    <div class="class">
      <div class="juxing junxing1"></div>
      <div class="juxing junxing2"></div>
      <div class="touxiang">
        <img :src="require('@/assets/img/touxiang.webp')" alt="" />
        <p>Mitchell</p>
      </div>
      <div class="xiek">已下课</div>
      <p class="etitle">
        African Safari Animals
      </p>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div class="b1">奇妙的草原动物</div>
          </template>
          神奇的草原有着神奇的动物
        </van-collapse-item>
      </van-collapse>
      <div class="goclass">
        <p>上课时间：今天19:30</p>
        <div class="goclassbut">
          去上课
        </div>
      </div>
    </div>
    <div class="keqian">
      <p class="keq">课前预习</p>
      <div class="keq-center">
        <div class="center-zsd">
          <div class="img-center">
            <img :src="require('@/assets/img/zhishidian.webp')" alt="" class="img-img" />
            <p>知识点</p>
          </div>
          <img :src="require('@/assets/img/youjiantou.webp')" alt="" class="youjiantou" />
        </div>
        <div class="center-zsd center-khb">
          <div class="img-center">
            <img :src="require('@/assets/img/kanhuiben.webp')" alt="" class="img-img" />
            <p>看绘本</p>
          </div>
          <img :src="require('@/assets/img/youjiantou.webp')" alt="" class="youjiantou" />
        </div>
      </div>
      <p class="keh">课后作业</p>
      <div class="keq-center">
        <div class="center-zsd">
          <div class="img-center">
            <img :src="require('@/assets/img/xuanyixuan.webp')" alt="" class="img-img" />
            <p>选一选</p>
          </div>
          <img :src="require('@/assets/img/youjiantou.webp')" alt="" class="youjiantou" />
        </div>
        <div class="center-zsd center-khb">
          <div class="img-center">
            <img :src="require('@/assets/img/dudanci.webp')" alt="" class="img-img" />
            <p>读单词</p>
          </div>
          <img :src="require('@/assets/img/youjiantou.webp')" alt="" class="youjiantou" />
        </div>
      </div>
    </div>
    <div class="kehou">
      <div class="juxing junxing3"></div>
      <div class="juxing junxing4"></div>
      <img :src="require('@/assets/img/fenxiangdian.webp')" alt="" class="fenxiangdian" />
      <div class="fenxiangquan">
        <div class="fenx"></div>
      </div>
      <p>课后报告</p>
      <div class="fenx">
        <p>分享课后报告</p>
        <div class="fenxiang">
          分享
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"]
    };
  }
};
</script>
<style lang="scss" scoped>
#sdcenter {
  width: 100%;
  padding: 0 15px 20px 15px;
  box-sizing: border-box;
  z-index: 999;
  // margin-bottom: 20px;
  .class {
    background: #fff;
    margin-top: -15px;
    width: 100%;
    // height: 222px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 15px;
    position: relative;
    .b1 {
      display: flex;
      text-align: left;
      text-indent: -15px;
    }
    .juxing {
      background: #fff;
      position: absolute;
      bottom: -24px;
      width: 6px;
      height: 30px;
      border: 1px solid;
      border-radius: 5px;
    }
    .junxing1 {
      left: 47px;
    }
    .junxing2 {
      right: 47px;
    }
    .touxiang {
      width: 55px;
      height: 70px;
      position: absolute;
      top: -25px;
      right: 30px;
      display: flex;
      flex-direction: column;
      img {
        width: 55px;
        height: 55px;
      }
      p {
        margin-top: 0;
        font-size: 8.5px;
        text-align: center;
        font-weight: 500;
      }
    }
    .xiek {
      margin-top: 10px;
      width: 55px;
      height: 15px;
      background: #f5f5f5;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    p {
      margin-top: 15px;
      text-align: left;
      line-height: 14px;
      font-size: 16px;
      font-weight: 600;
    }
    .ctitle {
      margin-top: 15px;
      width: 100%;
      height: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
      }
      .drop {
        width: 12px;
        height: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .goclass {
      margin-top: 15px;
      width: 100%;
      height: 100px;
      border-top: 1px dashed;
      .goclassbut {
        height: 45px;
        width: 300px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #3b98ff;
        border-radius: 20px;
        margin-left: 8px;
        color: #fff;
      }
    }
  }
  .keqian {
    margin-top: 15px;
    width: 100%;
    // height: 467px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 15px;
    .keq {
      text-align: left;
      font-size: 14.5px;
      font-weight: 600;
      margin-top: 10px;
    }
    .keq-center {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .center-zsd {
        width: 275px;
        height: 70px;
        background: #f5f5f5;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img-center {
          width: 120px;
          height: 40px;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          .img-img {
            margin-left: 15px;
            width: 40px;
            height: 38px;
          }
          p {
            margin-left: 10px;
            font-size: 14px;
            font-weight: 600;
            text-align: left;
          }
        }
        .youjiantou {
          margin-right: 15px;
          width: 10px;
          height: 14px;
        }
      }
      .center-khb {
        margin-top: 10px;
        width: 275px;
        height: 70px;
        background: #f5f5f5;
        border-radius: 10px;
      }
    }
    .keh {
      text-align: left;
      font-size: 14.5px;
      font-weight: 600;
      margin-top: 30px;
    }
  }
  .kehou {
    // overflow: hidden;
    margin-top: 15px;
    width: 100%;
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 15px;
    position: relative;
    .juxing {
      position: absolute;
      top: -24px;
      width: 6px;
      height: 30px;
      border: 1px solid;
      border-radius: 5px;
      background: #fff;
    }
    .junxing3 {
      left: 47px;
    }
    .junxing4 {
      right: 47px;
    }
    p {
      margin-top: 15px;
      margin-bottom: 0px;
      font-size: 15px;
      font-weight: 600;
      text-align: left;
    }
    .fenx {
      margin-bottom: 20px;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .fenxiang {
        width: 73px;
        height: 30px;
        border-radius: 10px;
        background: #f5f5f5;
        font-size: 12px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
      }
    }
    .fenxiangdian {
      position: absolute;
      top: -2px;
      right: 26.5px;
      width: 55px;
      height: 25px;
    }
    .fenxiangquan {
      position: absolute;
      bottom: 7px;
      left: -14px;
      width: 40px;
      height: 40px;
      background: rgb(135, 185, 231);
      border-radius: 50%;
      z-index: -9;
      display: flex;
      justify-content: center;
      // align-items: center;
      .fenx {
        margin-top: 12.5px;
        width: 15px;
        height: 15px;
        background: #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
